<!-- config-operation.vue - 配置操作按钮 -->
<template>
  <div class="config-operation">
    <el-button 
      type="primary" 
      :icon="CopyDocument"
      @click="handleCopyConfig"
      class="operation-btn"
    >
      复制配置
    </el-button>
    
    <el-button 
      :icon="RefreshRight"
      @click="handleResetConfig"
      class="operation-btn"
    >
      重置配置
    </el-button>
  </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import { CopyDocument, RefreshRight } from '@element-plus/icons-vue'
import { useLayoutManage } from '@/layouts/layoutManage.js'
import { useTheme } from '@/composables/useTheme.js'

const { layoutSetting } = useLayoutManage()
const { themeMode, themeColor } = useTheme()

// 复制配置
function handleCopyConfig() {
  const config = {
    layout: {
      mode: layoutSetting.value.mode,
      sidebarCollapsed: layoutSetting.value.sidebarCollapsed,
      enableAnimation: layoutSetting.value.enableAnimation,
      showTabs: layoutSetting.value.showTabs,
      showFooter: layoutSetting.value.showFooter,
      isGrey: layoutSetting.value.isGrey,
      isWeak: layoutSetting.value.isWeak
    },
    theme: {
      mode: themeMode.value,
      color: themeColor.value
    }
  }
  
  const configStr = JSON.stringify(config, null, 2)
  
  // 复制到剪贴板
  navigator.clipboard.writeText(configStr).then(() => {
    ElMessage.success('配置已复制到剪贴板')
  }).catch(() => {
    // 降级方案：使用传统方法
    const textarea = document.createElement('textarea')
    textarea.value = configStr
    document.body.appendChild(textarea)
    textarea.select()
    document.execCommand('copy')
    document.body.removeChild(textarea)
    ElMessage.success('配置已复制到剪贴板')
  })
}

// 重置配置
function handleResetConfig() {
  ElMessageBox.confirm(
    '确定要重置所有配置吗？这将恢复到默认设置。',
    '确认重置',
    {
      type: 'warning',
      confirmButtonText: '重置',
      cancelButtonText: '取消'
    }
  ).then(() => {
    // 重置布局配置
    layoutSetting.value.mode = 'vertical'
    layoutSetting.value.sidebarCollapsed = false
    layoutSetting.value.enableAnimation = true
    layoutSetting.value.showTabs = true
    layoutSetting.value.showFooter = true
    layoutSetting.value.isGrey = false
    layoutSetting.value.isWeak = false
    
    // 移除样式
    document.documentElement.style.filter = ''
    
    ElMessage.success('配置已重置')
  }).catch(() => {
    // 用户取消
  })
}
</script>

<style lang="scss" scoped>
.config-operation {
  display: flex;
  gap: 12px;
  padding: 16px 0 0 0;
  
  .operation-btn {
    flex: 1;
  }
}
</style>

